<template>
  <div id="detailContainer" class="slide-enter-active">
    <m-header title="影片详情">
      <i class="iconfont icon-right" @touchstart="handleToBack"></i>
    </m-header>
    <loading v-if="isLoading"></loading>
    <div v-else id="content" class="contentDetail">
      <div class="detail_list">
        <div class="detail_list_bg" :style="{ 'background-image': 'url('+ detailMovie.videoImg.replace(/w\.h/, '148.208') +')'}"></div>
        <div class="detail_list_filter"></div>
        <div class="detail_list_content">
          <div class="detail_list_img">
            <img :src="detailMovie.img | setWH('128.180')" alt="">
          </div>
          <div class="detail_list_info">
            <h2>{{detailMovie.nm}}</h2>
            <p>{{detailMovie.enm}}</p>
            <p>{{detailMovie.sc}}</p>
            <p>{{detailMovie.cat}}</p>
            <p>中国大陆 / {{detailMovie.dur}}分钟</p>
            <p>{{detailMovie.pubDesc}}</p>
          </div>
        </div>
      </div>
      <div class="detail_intro">
        <p>{{detailMovie.dra}}</p>
      </div>
      <swiper class="detail_player swiper-container" :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item, index) in detailMovie.photos" :key="index">
          <img :src="item | setWH('750.350')" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import MHeader from '@/components/common/Header'
import { nextTick } from 'q';
export default {
  props: {
    movieId: {required: true}
  },
  data() {
    return {
      detailMovie: {},
      isLoading: true,
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
        },
      }
    }
  },
  methods: {
    handleToBack() {
      this.$router.back()
    },
    async fetch() {
      // http://39.97.33.178/api/detailmovie?movieId=345808
      let res = await this.$axios.get(`/api/detailmovie?movieId=${this.movieId}`)
      this.detailMovie = res.data.data.detailMovie
      this.isLoading = false
    }
  },
  mounted() {
    this.fetch()
  },
  components: {
    MHeader
  }
}
</script>

<style scoped>
#detailContainer {width: 100%; min-height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; z-index: 999}
#detailContainer.slide-enter-active {animation: 0.3s slideMove}
@keyframes slideMove {
  0% {transform: translateX(100%)}
  100% {transform: translateX(0)}
}
#content.contentDetail{ display: block; margin-bottom:0;}
#content .detail_list{ height:200px; width:100%; position: relative; overflow: hidden;}
.detail_list .detail_list_bg{ width:100%; height:100%;background-position:0 40%; filter:blur(5px); background-size:cover; position: absolute; left: 0; top: 0;}
.detail_list .detail_list_filter{ width:100%; height:100%; position: absolute;background-color: #40454d;opacity: .55; position: absolute; left: 0; top: 0; z-index: 1;}
.detail_list .detail_list_content{ display: flex; width:100%; height:100%; position: absolute; left: 0; top: 0; z-index: 2;}
.detail_list .detail_list_img{ width:108px; height: 150px; border: solid 1px #f0f2f3; margin:20px;}
.detail_list .detail_list_img img{ width:100%; height: 100%;}
.detail_list .detail_list_info{ margin-top: 20px;}
.detail_list .detail_list_info h2{ font-size: 20px; color:white; font-weight: normal; line-height: 40px;}
.detail_list .detail_list_info p{ color:white; line-height: 20px; font-size: 14px; color:#ccc;}

#content .detail_intro{ padding: 10px;}
#content .detail_player{ margin: 0 10px }
.detail_player .swiper-slide{ overflow: hidden; height: 270px;}
.detail_player .swiper-slide img{ width:100%; height: 100%; margin-bottom: 5px;}
</style>
